<!--
 * @Date: 2023-01-10 11:50:02
 * @LastEditTime: 2023-02-09 20:56:37
 * @FilePath: /mode-startup-template/src/views/home/home.vue
 * 介绍:首页
-->
<script lang="ts" setup>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75 /*垂直视野角度*/,
  innerWidth / innerHeight /*视锥体长宽比*/,
  0.1 /*锥体近端大小*/,
  1000 /*锥体远端大小*/
);
camera.position.set(0, 0, 10); //设置相机位置
//场景添加相机
scene.add(camera);
camera.aspect = innerWidth / innerHeight; //更新摄像机宽高比
camera.updateProjectionMatrix(); //更新摄像机投影矩阵

//创建几何体
const cubeGeometry = new THREE.BoxGeometry(1 /*长*/, 1 /*宽*/, 1 /*高*/);
//创建材质
const cubeMaterial = new THREE.MeshBasicMaterial({
  color: 0xfff00,
});
//创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
//添加物体
scene.add(cube);

const renderer = new THREE.WebGLRenderer(); //webGl渲染器
window.addEventListener("resize", resizerender);
function resizerender() {
  renderer.setSize(innerWidth, innerHeight); //更新渲染器尺寸
  renderer.setPixelRatio(devicePixelRatio); //更新渲染器像素比
}
resizerender();
renderer.render(scene, camera); //追加渲染对象
document.body.appendChild(renderer.domElement); //将渲染器追加到body上

/**轨道控制器 */
const controls = new OrbitControls(
  camera /*被控制的物体*/,
  renderer.domElement /*渲染的dom*/
);
controls.enableDamping = true; //开启控制器阻尼--滑动惯性
function render() {
  renderer.render(scene, camera);
  controls.update(); //控制器阻尼
  //告诉浏览器我需要执行一个动画
  requestAnimationFrame(render);
}
render();
const axesHelper = new THREE.AxesHelper(10 /*长度*/);
scene.add(axesHelper);
</script>

<template>
  <div></div>
</template>

<style lang="less" scoped></style>
